{% extends 'client_portal/base.html' %}{% load portal_tags %}
{% block content %}
<section class="portal-section-head"><div><h2>Estado dos websites</h2><span>Disponibilidade, tempos de resposta e incidentes comunicados pela Kreate4Web.</span></div></section>
<div class="portal-stat-grid portal-monitor-client-stats">
  <article><span>◉</span><div><small>Monitores</small><strong>{{ monitors|length }}</strong></div></article>
  <article class="stat--green"><span>✓</span><div><small>Operacionais</small><strong>{{ monitor_up }}</strong></div></article>
  <article class="stat--amber"><span>!</span><div><small>Requerem atenção</small><strong>{{ monitor_attention }}</strong></div></article>
  <article><span>↻</span><div><small>Atualização</small><strong>Automática</strong></div></article>
</div>
<div class="portal-card-grid portal-monitor-client-grid">
{% for monitor in monitors %}
  <article class="portal-service-card portal-monitor-client-card is-{{ monitor.status }}">
    <div class="portal-service-top"><span class="service-icon">◉</span><span class="status status--{{ monitor.status|status_tone }}">{{ monitor.get_status_display }}</span></div>
    <h3>{{ monitor.name }}</h3><p>{{ monitor.url }}</p>
    <dl>
      <div><dt>HTTP</dt><dd>{{ monitor.last_http_status|default:"—" }}</dd></div>
      <div><dt>Resposta</dt><dd>{% if monitor.last_response_ms %}{{ monitor.last_response_ms }} ms{% else %}—{% endif %}</dd></div>
      <div><dt>Última verificação</dt><dd>{{ monitor.last_checked_at|date:"d/m/Y H:i"|default:"Por verificar" }}</dd></div>
      <div><dt>Uptime 30 dias</dt><dd>{% with uptime=monitor.uptime_percentage %}{% if uptime is not None %}{{ uptime }}%{% else %}Sem dados{% endif %}{% endwith %}</dd></div>
    </dl>
  </article>
{% empty %}<article class="portal-service-card"><h3>Sem monitorização disponível</h3><p>Ainda não existem websites visíveis nesta área.</p></article>{% endfor %}
</div>

<section class="portal-section-head portal-section-spaced"><div><h2>Incidentes recentes</h2><span>Histórico das situações comunicadas ao cliente.</span></div></section>
<div class="portal-table-wrap"><table class="portal-table"><thead><tr><th>Website</th><th>Estado</th><th>Aberto em</th><th>Resolvido em</th><th>Motivo</th></tr></thead><tbody>
{% for incident in incidents %}<tr><td><strong>{{ incident.monitor.name }}</strong></td><td><span class="status status--{{ incident.status|status_tone }}">{{ incident.get_status_display }}</span></td><td>{{ incident.opened_at|date:"d/m/Y H:i" }}</td><td>{{ incident.resolved_at|date:"d/m/Y H:i"|default:"—" }}</td><td>{{ incident.reason|truncatechars:100 }}</td></tr>{% empty %}<tr><td colspan="5">Sem incidentes registados.</td></tr>{% endfor %}
</tbody></table></div>
{% endblock %}